<template>
<!-- 第一种实现：给具体的li标签加动画 -->
  <!-- <transition name="todo" appear=""> -->
    <li>
      <label>
          <!-- 给多选框的checked属性动态绑定true或false -->
          <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
          <!-- 不建议-这样是修改props属性：还可以使用v-model，这里是双向绑定，可以直接该对象属性值，但不能直接改对象 -->
          <!-- v-model修改了props的值，违反vue原则 -->
          <!-- <input type="checkbox" v-model="todo.done"/> -->
          <span v-show="!todo.isEdit">{{todo.title}}</span>
          <input v-show="todo.isEdit" type="text"
            :value="todo.title"
            @blur="handlerBlur(todo,$event)"
            ref="inputRef"/>
      </label>
      <button class="btn btn-danger" @click="handelDelete(todo.id)">删除</button>
      <button v-show="!todo.isEdit" class="btn btn-edit" @click="handelEdit(todo)">编辑</button>
    </li>
  <!-- </transition> -->
</template>

<script>
  import pubsub from 'pubsub-js'
    export default {
        name:'MyItem',
        // 接收MyList组件传递的todo
        props:['todo'],
        methods:{
            //勾选or取消勾选
            handleCheck(id){
              // 通知组件调用App组件的回调
              // this.ListcheckTodo(id) props方式
              //全局事件总线方式
              this.$bus.$emit("getAppCheckTodo",id)
            },
            //删除
            handelDelete(id){
                if(confirm('确认删除吗？')){
                    //点确定走这里
                    // this.ListDeleteTodo(id)
                    //全局事件总线方式
                    // this.$bus.$emit("getAppDeleteTodo",id)
                    // 消息发布与订阅方式
                    pubsub.publish('getAppDeleteTodo',id)
                }
            },
            handelEdit(todo){
              //判断todo是否有isEdit属性，对象自带的API：判断身上有没有某个属性
              if(todo.hasOwnProperty('isEdit')){
                // 有直接修改为true，没有则$set属性
                todo.isEdit = true
              }else{
                this.$set(todo,'isEdit',true)
              }
              //这里直接调用input框获取焦点的方法不奏效，因为代码走到此处，vue还没有解析模板，上面的input框还是被隐藏状态，隐藏状态的input框不能获取焦点
              //用定时器也能实现，无非就是延时去获取焦点，不建议
              //this.$refs.inputRef.focus()
              //nextTick函数所指定的节点，会在DOM节点更新完成之后去执行
              //什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中去执行
              this.$nextTick(function(){
                this.$refs.inputRef.focus()
              })
            },
            handlerBlur(todo,e){
              todo.isEdit = false
              //如果为空，不触发修改
              if(!e.target.value.trim()) return alert('输入不能为空！')
              //用事件总线去触发修改
              this.$bus.$emit('updateToto',todo.id,e.target.value)
            }
        }
    }
</script>

<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
/* 鼠标悬停背景色 */
li:hover{
  background: #ddd;
}
/* 鼠标悬停，显示后面的删除按钮 */
li:hover button{
  display: block;
}
/* 动画效果 */
.todo-enter-active{
    animation: donghua1 0.5s linear;
}
.todo-leave-active{
    animation: donghua1 0.5s linear reverse;
}
  /* 定义关键帧--起一个名字 */
@keyframes donghua1{
    from{
        transform: translateX(100%);
    }
    to{
        transform: translateX(0px);
    }
}
</style>